<template>
  <!-- 添加或修改盘点计划对话框 -->
  <el-dialog :title="title" v-if="open" v-model="open" width="1200px" append-to-body>
    <el-card class="box-card" shadow="always">
      <el-table :data="dataSource">
        <!-- <el-table-column v-for="(col, index) in columns" :key="index" :label="col.title" align="center"
          :prop="col.dataIndex" :width="col.width" /> -->
        <el-table-column label="价格名称" align="center" class-name="small-padding fixed-width" prop="label" width="150" />
        <el-table-column label="价格" align="center" class-name="small-padding fixed-width" prop="result" width="60" />
        <el-table-column label="价格调整" align="left" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-select style="width: 150px;" v-model="scope.row.priceSelect"
              @change="priceChange($event, scope.row, scope.$index)">
              <el-option v-for="(item, index) in dataSource" :key="index" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
            <el-select style="width: 150px;margin-left: 10px;" v-model="scope.row.priceCount"
              @change="priceChange($event, scope.row, scope.$index)">
              <el-option v-for="(item, index) in countType" :key="index" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
            <el-input style="width: 150px;margin-left: 10px;" v-model="scope.row.input" placeholder="请输入"
              @input="priceChange($event, scope.row, scope.$index)"></el-input>
            <span style="padding:0 10px">=</span>
            <el-input style="width: 150px;" v-model="scope.row.price" placeholder="请输入"></el-input>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import goods from '@/api/goods/goods'
import modelMixin from "@/mixins/modelMixin";
export default {
  name: "editPriceForm",
  mixins: [modelMixin],
  data() {
    return {
      open: false,
      title: '商品调价',
      funcObj: goods,
      form: {},
      dataSource: [],
      countType: [
        { label: '加', value: '+' },
        { label: '减', value: '-' },
        { label: '乘', value: '*' },
        { label: '除', value: '/' },
      ],
      priceArr: [],
      columns: [
        {
          title: '价格名称',
          dataIndex: 'priceName',
          align: 'center',
          sortable: true
        },
        {
          title: '价格调整',
          dataIndex: 'des',
          align: 'center',
          sortable: true
        }
      ],
      disabled: false,
      loading: false
    }
  },
  methods: {
    add() {
      this.open = true;
    },
    edit(row, dict) {
      this.open = true;
      this.form = { ...row };
      console.log('dict :>> ', dict);
      this.dataSource = JSON.parse(JSON.stringify(dict || []))
      console.log(this.dataSource);
      this.dataSource.forEach(item => {
        item.result = this.getPrice(row, item);
        item.priceSelect = null
      })
    },
    cancel() {
      this.open = false;
    },
    priceChange(event, row, index) {
      let result = this.count(row.priceCount, +row.priceSelect || 0, +row.input || 0);
      row.price = result
    },
    count(type, num1, num2) {
      switch (type) {
        case '+':
          return (num1 + num2).toFixed(2) || 0;
        case '-':
          return (num1 - num2).toFixed(2) || 0;
        case '*':
          return (num1 * num2).toFixed(2) || 0;
        case '/':
          if (num2) {
            return (num1 / num2).toFixed(2) || 0;
          } else {
            return 0
          }
        default:
          break;
      }
    },

    getPrice(row, child) {
      let defaultPriceArr = [
        "unitName",
        "costPrice",
        "purchasePrice",
        "wholesalePrice",
        "salePrice",
        "upsetPrice",
        "retailPrice",
      ]
      if (defaultPriceArr.includes(child.value)) {
        return row[child.value]
      } else {
        let item = (row.goodsRedisList || []).find(item => item.priceName == child.value)
        return item ? item.price : ''
      }

    },

    classifyForm() {
      let params = { ...this.form }
      let goodsRedisList = []
      let defaultPriceArr = [
        "unitName",
        "costPrice",
        "purchasePrice",
        "wholesalePrice",
        "salePrice",
        "upsetPrice",
        "retailPrice",
      ]
      this.dataSource.forEach(item => {
        if (defaultPriceArr.includes(item.value)) {
          params[item.value] = item.price || item.result
        } else {
          goodsRedisList.push({
            priceName: item.value,
            price: item.price || item.result
          })
        }
      })
      params.goodsRedisList = goodsRedisList
      this.form = params
      return params
    },
    submitForm() {
      this.classifyForm()
      this.funcObj.update(this.form).then(res => {
        this.loading = false
        if (res.code == 200) {
          this.$modal.msgSuccess('编辑成功')
          this.open = false;
          this.$emit('ok');
        } else {
          this.$modal.msgError(res.msg)
        }
      }).catch(err => {
        this.loading = false
        console.log('err :>> ', err);
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tags {
  width: 80%;
  margin: 0 auto;
}

.tags,
.tag {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.tag-num {
  margin-right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: #FF9D93;
  text-align: center;
  color: #fff;
  line-height: 40px;
  font-size: 20px;
}

.tag-name {
  height: 40px;
  line-height: 40px;
  font-size: 20px;
}

.avatar-uploader,
.el-upload {
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 178px !important;
  height: 178px;
}

.avatar-uploader:hover,
.el-upload:hover {
  border-color: #409EFF;
}

.upload-text {
  font-size: 14px;
  color: #8c939d;
  line-height: 178px;
  text-align: center;
  margin: 0 auto;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.active .tag-num {
  background-color: #FF4D3C;
}
</style>